<template>
	<view class="rank">
		<u-tabs :list="tabList" name="item_name" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="flex statistic__date">
			<view class="statistic__date-text u-margin-20 u-font-15" @click="showDate = true">{{date}}</view>

			<u-icon name="arrow-down-fill" size="30"></u-icon>
		</view>
		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>
				<view class="item" v-for="(item,index) in itemList" @click="goDetail(item)">
					<view class="flex justify-between">
						<view class="bold">
							{{item.changeTypeName}}
						</view>
						<view class="theme bold">
							{{item.changeStatus=="OUTCOME"?"-"+item.changeAmount:"+"+item.changeAmount}}
						</view>
					</view>
					<view class="flex justify-between u-m-t-10">
						<view class="">
							{{item.createTime}}
						</view>
						<view class="theme">
							{{item.changeType=="WITHDRAWAL"?"提现":item.changeType=="WITHDRAWAL_OFFSET"?"提现失败后冲正":item.changeType=="WITHDRAWAL_COMPLETED"?"提现成功":""}}
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>
		<u-picker v-model="showDate" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>
<script>
	import getDateTime from '@/common/js/getdateTime.js';
	export default {
		data() {
			return {

				tabList: [{
					item_name: '分润账户',
					value: 'POS_PROFIT' //TRANS_AMOUNT

				}, {
					item_name: '返现账户',
					value: 'ACTIVE_PROFIT' //TRANS_COUNT
				}, {
					item_name: '流量卡账户',
					value: 'FLOW_PROFIT' //SN_COUNT

				}, {
					item_name: '其他账户', //SN_BING
					value: 'OTHER_PROFIT'
				}],
				current: 0,

				searchParams: {
					accountType: "POS_PROFIT", //list value
					searchMonth: "", //1 传这个


				},
				pageNo: 1,
				pageSize: "10",
				itemList: [],
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				date: "",
				showDate: false,
				year: "",
				month: "",
				day: "",
				scrollTop: 0,
				status: "loadmore",
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		mounted() {
			this.date = getDateTime.dateTimeStr('y-m');;

			this.searchParams.searchMonth = this.date;

			this.getList();
		},
		methods: {
			change(index) {
				this.current = index;
				this.searchParams.accountType = this.tabList[index].value;
				this.pageNo = "1";
				this.itemList = [];
				this.getList();
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.getList();
			},
			getList() {
				const _that = this;
				this.$zx.order_api.listAccountDetail(this.pageNo, this.pageSize, this.searchParams).then((data) => {

					console.log("data=" + JSON.stringify(data))
					_that.itemList = _that.itemList.concat(data.list);
					// console.log("data=" + JSON.stringify(_that.terminalList))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},

			confirm(object) {
				console.log("o=" + JSON.stringify(object))
				this.date = object.year + "-" + object.month;
				this.searchParams.searchMonth = object.year + "-" + object.month;
				this.pageNo = "1";
				this.itemList = [];
				this.getList();
			},
			goDetail(item) {
				let itemStr = JSON.stringify(item)
				this.$u.route('packageD/pages/mine/balance/balanceDetail', {
					"item": encodeURIComponent(itemStr)
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.item {
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}
</style>